<template>
    <div>
        <div class="i-layout-page-header">
            <div class="i-layout-page-header">
                <span class="ivu-page-header-title">{{$route.meta.title}}</span>
            </div>
        </div>
        <Card :bordered="false" dis-hover class="ivu-mt">
            <Form ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="120"  label-position="right">
                <FormItem label="头像" prop="">
                    <div class="avatar" @click="uploadimg">
                        <img class="imgwh" :src="formValidate.head_pic" />
                    </div>
                </FormItem>
                <FormItem label="账号" prop="">
                    <Input type="text" v-model="account" :disabled="true" class="input"></Input>
                </FormItem>
                <FormItem label="姓名" prop="real_name">
                    <Input type="text" v-model="formValidate.real_name" class="input"></Input>
                </FormItem>
                <FormItem label="原始密码" prop="pwd">
                    <Input type="password" v-model="formValidate.pwd" class="input"></Input>
                </FormItem>
                <FormItem label="新密码" prop="new_pwd">
                    <Input type="password" v-model="formValidate.new_pwd"  class="input"></Input>
                </FormItem>
                <FormItem label="确认新密码" prop="conf_pwd">
                    <Input type="password" v-model="formValidate.conf_pwd" class="input"></Input>
                </FormItem>
                <FormItem>
                    <Button type="primary" @click="handleSubmit('formValidate')">提交</Button>
                </FormItem>
            </Form>
        </Card>

        <Modal
                v-model="modalPic"
                width="1024px"
                scrollable
                footer-hide
                closable
                title="上传商品图"
                :mask-closable="false"
                :z-index="1"
        >
            <uploadPictures
                    :isChoice="isChoice"
                    @getPic="getPic"
                    @getPicD="getPicD"
                    :gridBtn="gridBtn"
                    :gridPic="gridPic"
                    v-if="modalPic"
            ></uploadPictures>
        </Modal>
    </div>
</template>

<script>
    // import { update_admin } from '@/api/user'
    import uploadPictures from '@/components/uploadPictures'
    import { updateAdmin , getuserinfo , uploadImg } from '@/api/index'
    import { mapState } from 'vuex'
    export default {
        components:{
            uploadPictures
        },
        name: 'setting_user',
        computed: {
            ...mapState('media', [
                'isMobile'
            ]),
            ...mapState('userLevel', [
                'categoryId'
            ]),
            labelWidth () {
                return this.isMobile ? undefined : 75
            },
            labelPosition () {
                return this.isMobile ? 'top' : 'left'
            }
        },
        data () {
            return {
                account: '',
                info:[],
                formValidate: {
                    real_name: '',
                    pwd: '',
                    new_pwd: '',
                    conf_pwd: '',
                    head_pic:'',
                },
                ruleValidate: {
                    real_name: [
                        { required: true, message: '您的姓名不能为空', trigger: 'blur' }
                    ],
                    pwd: [
                        { required: true, message: '请输入您的原始密码', trigger: 'blur' }
                    ],
                    new_pwd: [
                        { required: true, message: '请输入您的新密码', trigger: 'blur' }
                    ],
                    conf_pwd: [
                        { required: true, message: '请确认您的新密码', trigger: 'blur' }
                    ]
                },
                // header: { 'Authori-zation':  'Bearer ' + getCookies("token") },
                // uploadData: {
                //     filename: "file",
                // },
                // upload: '',

                modalPic: false,
                isChoice: "dan",
                gridPic: {
                    xl: 6,
                    lg: 8,
                    md: 12,
                    sm: 12,
                    xs: 12,
                },
                gridBtn: {
                    xl: 4,
                    lg: 8,
                    md: 8,
                    sm: 8,
                    xs: 8,
                },

            }
        },
        mounted () {
            this.account = this.$store.state.userInfo.userInfo.account
            this.getuserinfo();
        },
        methods: {
            uploadimg(){
                this.modalPic = !this.modalPic;
            },
            // 获取单张图片信息
            getPic(pc) {
                this.formValidate.head_pic = pc.att_dir;
                this.modalPic = false;
            },
            // 获取多张图信息
            getPicD(pc) {
                // this.images = pc;
                // this.images.map((item) => {
                //     this.formValidate.slider_image.push(item.att_dir);
                //     this.formValidate.slider_image = this.formValidate.slider_image.splice(
                //         0,
                //         10
                //     );
                // });
                // this.oneFormValidate[0].pic = this.formValidate.slider_image[0];
                // this.modalPic = false;
            },
            getuserinfo(){
                let that = this;
                getuserinfo().then(res=>{
                    that.formValidate.real_name = res.data.real_name;
                    that.formValidate.head_pic = res.data.head_pic;
                    that.$store.commit("userInfo/userInfo", res.data);
                })
            },
            handleSubmit (name) {
                this.$refs[name].validate((valid) => {
                    if (valid) {
                        updateAdmin(this.formValidate).then(res => {
                            this.$Message.success(res.msg)
                            setTimeout(()=>{
                                this.getuserinfo();
                            },1000)
                        }).catch(res => {
                            this.$Message.error(res.msg)
                        })
                    } else {
                        if (this.formValidate.new_pwd !== this.formValidate.conf_pwd) {
                            this.$Message.error('您输入的新密码与旧密码不一致')
                        }
                    }
                })
            }
        }
    }
</script>

<style scoped>
    .input{width:400px;}
    .avatar{
        width: 80px;
        height: 80px;
        border-radius: 50%;
        overflow: hidden;
        border: 1px solid #999;
    }
</style>
